<template>
  <div :style="{ height: chartHeight }" ref="chart" class="chart"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, watch } from 'vue';
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';

// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components';

// 引入折线，饼图组件
import { LineChart } from 'echarts/charts';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

const chart = ref<HTMLDivElement>()
const myChart = ref()

const props = defineProps(['data', 'chartHeight'])

const xAxisD = ref<string[]>([])
const seriesD = ref<number[]>([])

const option = ref()

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const visit = (e: any) => {
  xAxisD.value = []
  seriesD.value = []
  for (let i = 0; i < e.length; i++) {
    xAxisD.value.push(e[i].date)
    seriesD.value.push(e[i].count)
  }
  option.value = {
    color: ['#2B5AED'],
    grid: {
      top: '4%',
      left: '0%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    // 添加动画配置
    animation: true,
    animationDuration: 1000,
    animationEasing: 'cubicInOut',
    animationThreshold: 2000,
    // 添加过渡动画配置
    transition: ['all'],
    xAxis: {
      type: 'category',
      data: xAxisD.value,
      // 添加坐标轴动画
      animationDuration: 1000,
      animationEasing: 'cubicInOut'
    },
    yAxis: {
      type: 'value',
      // 添加坐标轴动画
      animationDuration: 1000,
      animationEasing: 'cubicInOut'
    },
    series: [
      {
        data: seriesD.value,
        type: 'line',
        smooth: true,
        // 添加系列动画配置
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut',
        // 添加渐入动画
        animationDelay: (idx: number) => idx * 50,
        // 添加强调动画配置
        emphasis: {
          scale: true,
          focus: 'series'
        }
      }
    ]
  }
}
onMounted(() => {

  visit(props.data)
  myChart.value = markRaw(echarts.init(chart.value as HTMLDivElement))
  myChart.value.setOption(option.value)
  window.addEventListener('resize', () => {
    myChart.value.resize()
  })
})

watch(() => props.data, (newVal) => {
  visit(newVal)
  // myChart.value = markRaw(echarts.init(chart.value as HTMLDivElement))
  myChart.value.setOption(option.value)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', () => {
    myChart.value.resize()
  })
  myChart.value?.dispose()
})
</script>


<style lang="less" scoped>
.chart {
  width: 100%;
}
</style>